<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0 auto;
        }
        .pe_header{
            width: 100%;
            height: 48px;
            position: fixed;
            top: 0;
            background-color: #f3f3f4;
            color: #676A6C;
            z-index: 10;
            border-radius: 1%;
        }

        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .pe_header .logo{
            height: 48px;
            width: 500px;
            text-align: center;
            color: white;
        }
        .pe_header .logo a h1{
            margin-top: 6px;
            margin-left: -20px;
            height: 40px;
            width: 500px;
            color: #676A6C;
            background: #f3f3f4;
            font-family: 楷体;
        }
        .pe_header .person_info{
            position: relative;
            height: 48px;
            width: 160px;
        }
        .pe_header .person_info img{
            border: 0;
            height: 48px;
            width: 50px;
            border-radius: 50%;
        }
        .pe_header .person_info p{
            position: absolute;
            margin-top: -36px;
            margin-left: 70px;
        }
        .pe_header .person_info .info{
            position: absolute;
            width: 156px;
            height: 66px;
            border-radius: 5%;
            background-color: #2f4050;
            top: 50px;
            z-index: 20;
            display: none;
        }
        .pe_header .person_info .info ul{
            width: 156px;
            height: 88px;
            font-size: 14px;
        }
        .pe_header .person_info .info ul li{
            width: 156px;
            height: 22px;
            position: relative;
            display: block;
            text-align: left;
        }
        .pe_header .person_info .info ul li a{
            position: relative;
            display: block;
            color: white;
            text-decoration: none;
            border-left: 4px solid transparent;
        }
        .pe_header .person_info:hover .info{
            display: block;
        }
        .pe_header .icons{
            margin-right: 10px;
            margin-top: -5px;
        }
        .pe_header .icons:hover{
            background-color: cornflowerblue;
        }
        .pe_header .icons img{
            padding-top: 10px;
            border: 0;
            height: 40px;
            width: 40px;
        }
        /*.pe_header .icons span{
            width: 1px;
            height: 1px;
            padding: 1px 5px;
            line-height: 1px;
            border-radius: 50%;
            background-color: red;
            font-size: 1px;
        }*/
        .pe_content .menu{
            position: absolute;
            top: 50px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: #2f4050;
            border-radius: 1%;
        }
        .pe_content .menu ul{
            width: 200px;
            height: 44px;
            font-size: 14px;
        }
        .pe_content .menu ul li{
            margin-left: -70px;
            width: 230px;
            height: 44px;
            position: relative;
            display: block;
            text-align: center;
        }

        .pe_content .menu ul li a{
            position: relative;
            display: block;
            color: #a7b1c2;
            padding: 14px 20px 14px 25px;
            text-decoration: none;
            border-left: 4px solid transparent;
        }
        .pe_content .menu ul li a:hover{
            color: white;
            background: #293846;
            border-left-color: #293846;
        }
        .pe_content .menu ul li a i{
            margin-left: -12px;
        }
        .pe_content .content{
            position: absolute;
            top: 50px;
            right: 0;
            bottom: 0;
            left: 202px;
            overflow: auto;
            min-width: 980px;
        }
    </style>
</head>
<body>
<div>
    <div class="pe_header">
        <div class="logo left">
            <a>
                <h1>河南交通职业学院医院管理系统</h1>
            </a>
        </div>
        <div class="person_info right">
            <img src="http://img3.imgtn.bdimg.com/it/u=400062461,2874561526&fm=26&gp=0.jpg">
            <p th:text="${user.name}">用户名</p>
            <div class="info">
                <ul>
                    <li><a href="/pe/peUserManage/toEditPassword">修改密码</a></li>
                    <!--<li><a>上传头像</a></li>-->
                    <li><a th:href="@{/logout}">退出</a></li>
                </ul>
            </div>
        </div>
        <div class="icons right">
            <!--<img src="/static/images/icon01.png">-->
            <!--<span>3</span>-->
        </div>
    </div>
    <div class="pe_content">
        <div class="menu">
            <ul>
                <li sec:authorize = "hasRole('ADMIN')">
                    <a href="/pe/peUserManage/peUserList1" target="iframe_pe_user">用户列表</a>
                </li>
                <li sec:authorize = "hasRole('ADMIN')">
                    <a href="/pe/peUserManage/toAddPeUser" target="iframe_pe_user">添加用户</a>
                </li>
                <li sec:authorize = "hasRole('ADMIN')">
                    <a href="/pe/peUserManage/peUserList2" target="iframe_pe_user">编辑用户</a>
                </li>
                <li sec:authorize = "hasRole('ADMIN')">
                    <a href="/pe/peUserManage/peUserList3" target="iframe_pe_user">用户授权</a>
                </li>
                <li sec:authorize = "hasRole('ADMIN')">
                    <a href="/pe/peUserManage/peUserList4" target="iframe_pe_user">删除用户</a>
                </li>
                <li sec:authorize = "hasRole('ADMIN')">
                    <a href="/pe/peUserManage/peUserList5" target="iframe_pe_user">体检信息</a>
                </li>
                <li sec:authorize = "hasAnyRole('ADMIN','USER')">
                    <a href="/pe/peUserManage/toEditPersonInfo" target="iframe_pe_user">个人信息</a>
                </li>
                <li sec:authorize = "hasAnyRole('ADMIN','USER')">
                    <a href="/pe/peUserManage/toQueryItemsInfo" target="iframe_pe_user">个人体检</a>
                </li>
            </ul>
        </div>
        <div class="content">
            <iframe style="width: 100%;height: 100%;display: block"  id="auth_content_iframe"  frameborder="0" name="iframe_pe_user"></iframe>
        </div>
    </div>
    <div class="pe_footer"></div>
</div>
</body>
</html>